<script setup>
import topNav from "../../components/topNav.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted, onUnmounted } from "vue";
import {
  appStoreCenterSelector,
  appShopSelector,
  appEmployeeSelector,
  appShopSelectorAll,
} from "@/services/transfer";

const selectid = ref("");
const onename = ref("");
const twoname = ref("");
const threename = ref("");
const userObj = ref({});
const showSelect = ref("");

onLoad((e) => {
  if (uni.getStorageSync("user")) {
    userObj.value = JSON.parse(uni.getStorageSync("user"));
    model1.value.sourceShopId = userObj.value.shopId;
    onename.value = userObj.value.shopName;
  }
  getAppStoreCenterSelector();
  getAppShopSelector();
  getAppShopSelectorAll();

  if (uni.getStorageSync("selectShopType")) {
    showSelect.value = uni.getStorageSync("selectShopType");
    // if (isOpens(["shop:chart:business"])) {
    //   getChartBusiness();
    // }

    // getChartCategory();
    // getChartProduct();
  }
});

onShow(() => {
  // if (uni.getStorageSync("shopselect")) {
  //   let {
  //     sourceShopId,
  //     targetShopId,
  //     signEmployeeId,
  //     sourceShopName,
  //     targetShopName,
  //     signEmployeeName,
  //   } = JSON.parse(uni.getStorageSync("shopselect"));
  //   model1.value.sourceShopId = sourceShopId;
  //   model1.value.targetShopId = targetShopId;
  //   model1.value.signEmployeeId = signEmployeeId;
  //   onename.value = sourceShopName;
  //   twoname.value = targetShopName;
  //   threename.value = signEmployeeName;
  // }
});
onUnmounted(() => {});

const saveFun = () => {};
const actions = ref([{ name: "男" }, { name: "女" }, { name: "保密" }]);
const formRef = ref(null);
const sourceShopId = ref("");
const targetShopId = ref("");
const signEmployeeId = ref("");
const model1 = ref({
  sourceShopId: "",
  targetShopId: "",
  signEmployeeId: "",
});
const openList = ref([]);

// 定义方法
const showSex = ref(false);
const sexSelect = (e) => {
  state.model1.userInfo.sex = e.name;
  if (formRef.value) {
    formRef.value.validateField("userInfo.sex");
  }
};

//弹框
const upper = (e) => {
  console.log(e);
};
const lower = (e) => {
  console.log(e);
};
const scroll = (e) => {
  console.log(e);
};

const sourceShopList = ref([]);
const showInShop = ref(false);
const ShopList = ref([]);
const ShopList2 = ref([]);
const employeeList = ref([]);
const selectType = ref(1);
const name = ref("");

// 仓库选择
const getAppStoreCenterSelector = async () => {
  let res = await appStoreCenterSelector();
  sourceShopList.value = res.data.datas;
};
// 门店选择
const getAppShopSelector = async () => {
  let res = await appShopSelector({
    name: name.value,
    pageIndex: 1,
    pageSize: 9999,
  });
  ShopList.value = res.data.datas;
};

// 门店选择
const getAppShopSelectorAll = async () => {
  let res = await appShopSelectorAll({
    name: name.value,
    pageIndex: 1,
    pageSize: 9999,
  });
  ShopList2.value = res.data.datas;
};
// 仓库选择
const getAppEmployeeSelector = async () => {
  let res = await appEmployeeSelector({
    shopId: model1.value.targetShopId,
    available: true,
  });
  employeeList.value = res.data.datas;
};

const selectItem = ref({});

const showShopFun = (index) => {
  console.log(index);
  name.value = "";
  selectType.value = index;
  selectItem.value = {};
  selectid.value = "";

  if (index == 1) {
    openList.value = ShopList.value;
    selectid.value = model1.value.sourceShopId ? model1.value.sourceShopId : "";
  }
  if (index == 2) {
    openList.value = ShopList2.value;
    selectid.value = model1.value.targetShopId ? model1.value.targetShopId : "";
  }
  if (index == 3) {
    openList.value = employeeList.value;
    selectid.value = model1.value.signEmployeeId
      ? model1.value.signEmployeeId
      : "";
  }
  showInShop.value = true;
};

const search = async () => {
  let res = null;
  if (selectType.value == 1) {
    res = await appShopSelector({
      name: name.value,
      pageIndex: 1,
      pageSize: 9999,
    });
    openList.value = res.data.datas;
    console.log(selectType.value);
  }
  if (selectType.value == 2) {
    res = await appShopSelectorAll({
      name: name.value,
      pageIndex: 1,
      pageSize: 9999,
    });
    openList.value = res.data.datas;
    console.log(selectType.value);
  }
};

const shopSelect = (e) => {
  if (e.id == model1.value.sourceShopId || e.id == model1.value.targetShopId) {
    uni.showToast({
      title: "不能选择相同的仓库",
      icon: "none",
    });
    return;
  }
  if (selectid.value != e.id) {
    selectid.value = e.id;
  }

  selectItem.value = e;
};
const selectTo = () => {
  if (!selectid.value) {
    uni.showToast({
      title: "请点击选择",
      icon: "none",
    });
    return;
  }

  if (selectType.value == 1) {
    onename.value = selectItem.value.name;
    model1.value.sourceShopId = selectItem.value.id;
  }

  if (selectType.value == 2) {
    twoname.value = selectItem.value.name;
    model1.value.targetShopId = selectItem.value.id;
    getAppEmployeeSelector();
    threename.value = "";
    model1.value.signEmployeeId = "";
  }
  if (selectType.value == 3) {
    threename.value = selectItem.value.name;
    model1.value.signEmployeeId = selectItem.value.id;
  }
  showInShop.value = false;
};
const nextTr = () => {
  if (!model1.value.sourceShopId) {
    uni.showToast({
      title: "请选择调出仓库",
      icon: "none",
    });
    return;
  }
  if (!model1.value.targetShopId) {
    uni.showToast({
      title: "请选择调入仓库",
      icon: "none",
    });
    return;
  }
  if (!model1.value.signEmployeeId) {
    uni.showToast({
      title: "请选择负责人",
      icon: "none",
    });
    return;
  }

  uni.setStorageSync(
    "shopselect",
    JSON.stringify({
      sourceShopId: model1.value.sourceShopId,
      targetShopId: model1.value.targetShopId,
      signEmployeeId: model1.value.signEmployeeId,
      sourceShopName: onename.value,
      targetShopName: twoname.value,
      signEmployeeName: threename.value,
    })
  );
  uni.navigateTo({
    url: "/pages/transfer/goods_sel/index",
  });
};
//无网状态
const connected = () => {
  getAppStoreCenterSelector();
  getAppShopSelector();
  getAppShopSelectorAll();
};
</script>

<template>
  <view class="bg">
    <topNav :title="'调货'" @save="saveFun" rType="save"></topNav>

    <view class="select">
      <up-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
        <view class="transfer">
          <view class="select-title">库存调货</view>
          <view class="transfer-input">
            <view class="transfer-left"
              ><view class="transfer-left-t">调</view
              ><view class="transfer-left-h"></view
              ><view class="transfer-left-r">入</view></view
            >
            <view class="transfer-right">
              <!-- @click="showShopFun(1)" -->
              <up-form-item
                label=" "
                prop="sourceShopId"
                borderBottom
                ref="item1"
                labelWidth="0"
                v-if="showSelect == 'shop'"
              >
                <text
                  class="select-text"
                  :class="onename ? 'select-text-to' : ''"
                  >{{ onename ? onename : "请选择" }}
                </text>
                <!-- <template #right>
                  <up-icon name="arrow-right"></up-icon>
                </template> -->
              </up-form-item>
              <up-form-item
                @click="showShopFun(1)"
                v-if="showSelect == 'admin'"
                label=" "
                prop="sourceShopId"
                borderBottom
                ref="item1"
                labelWidth="0"
              >
                <text
                  class="select-text"
                  :class="onename ? 'select-text-to' : ''"
                  >{{ onename ? onename : "请选择" }}
                </text>
                <template #right>
                  <up-icon name="arrow-right"></up-icon>
                </template>
              </up-form-item>
              <view class="transfer-right-h"></view>
              <up-form-item
                label=" "
                prop="targetShopId"
                borderBottom
                @click="showShopFun(2)"
                ref="item1"
                labelWidth="0"
              >
                <text
                  class="select-text"
                  :class="twoname ? 'select-text-to' : ''"
                  >{{ twoname ? twoname : "请选择" }}</text
                >
                <template #right>
                  <up-icon name="arrow-right"></up-icon>
                </template>
              </up-form-item>
            </view>
          </view>
        </view>
        <view class="select-qsr" v-if="model1.targetShopId">
          <up-form-item
            label="签收人"
            prop="signEmployeeId"
            borderBottom
            labelWidth="120rpx"
            @click="showShopFun(3)"
            ref="item1"
            :required="true"
          >
            <text
              class="select-text"
              :class="threename ? 'select-text-to' : ''"
              >{{ threename ? threename : "请选择" }}</text
            >
            <template #right>
              <up-icon name="arrow-right"></up-icon>
            </template>
          </up-form-item>
        </view>
      </up-form>
      <view class="bt-btn">
        <up-button
          style="background-color: #1679fb; color: #ffffff"
          @click="nextTr"
          text="下一步"
        ></up-button>
      </view>

      <up-action-sheet
        :show="showSex"
        :actions="actions"
        title="请选择性别"
        description="如果选择保密会报错"
        @close="showSex = false"
        @select="sexSelect"
      >
      </up-action-sheet>
    </view>
  </view>

  <up-popup
    v-model:show="showInShop"
    round="10"
    @close="showInShop = false"
    :safeAreaInsetBottom="true"
    :closeable="true"
  >
    <view class="popup-content">
      <view class="popup-content-title">
        <text>{{
          selectType == 1
            ? "门店"
            : selectType == 2
            ? "门店"
            : selectType == 3
            ? "签收人"
            : ""
        }}</text>
      </view>
      <view class="popup-content-list">
        <view style="padding: 20rpx 30rpx"
          ><up-search
            shape="round"
            v-if="selectType == 2 || selectType == 1"
            v-model="name"
            @search="search"
            @custom="search"
          ></up-search
        ></view>

        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view
            class="scroll-to"
            v-for="(item, index) in openList"
            :key="index"
            @click="shopSelect(item, 1)"
          >
            <view
              class="scroll-to-title"
              :class="item.id == selectid ? 'scroll-to-title-sel' : ''"
            >
              <text>{{ item.name }}</text>
            </view>
            <up-icon
              v-if="item.id == selectid"
              name="checkbox-mark"
              color="#1679FB"
              size="40rpx"
            ></up-icon>
          </view>

          <view
            style="padding: 50rpx 0 50rpx 0; text-align: center; color: #adadad"
            class="scroll-to-content"
            v-if="openList.length == 0"
          >
            暂无数据
          </view>
        </scroll-view>
      </view>
      <view class="popup-content-btn">
        <up-button
          class="bt-qx"
          type="default"
          :plain="true"
          text="取消"
          @click="showInShop = false"
        ></up-button>
        <up-button
          type="primary"
          style="background-color: #1679fb"
          @click="selectTo()"
          text="确定"
        ></up-button>
      </view>
    </view>
  </up-popup>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
